<template>
    <div class="header">
        <router-link 
            to ="/"
            v-show="showAbs" >
            <div class="go-back">&lt;</div>
        </router-link>

        <div 
            class="header-title"
            v-show="!showAbs"
            :style="opactiyStyle"
            >
             <router-link to ="/" ><div class="back">&lt;</div></router-link>
            景点详情
        </div>
    
    </div>
</template>

<script>

export default {
    name:'DetailHeader',
    data () {
        return {
            showAbs:true,
            opactiyStyle:{
                opacity:0
            }
        }
    },
    methods: {
        handleScroll(){
            const top = document.documentElement.scrollTop
            console.log(top)
            if(top > 60){
                let opacity = top/140
                opacity = opacity > 1 ? 1 : opacity
                this.opactiyStyle  =  {opacity}
                this.showAbs = false
            }else{
                this.showAbs = true
            }
        }
    },
    activated (){
        //全局事件的绑定
        window.addEventListener('scroll',this.handleScroll)
    },
    deactivated () {
        //全局事件的解绑
        window.removeEventListener('scroll',this.handleScroll)
    }
}
</script>

<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .header
        .go-back
            position:absolute
            left: 0.2rem
            top:0.2rem
            width: 0.8rem
            height: 0.8rem
            line-height :0.8rem
            text-align: center
            font-size:.4rem
            color:#fff
            background: rgba(0,0,0,.8)
            border-radius:0.4rem
            
        .header-title
            position:fixed
            top:0
            width:100%
            overflow: hidden
            height: .86rem
            line-height: .86rem
            color: #fff
            background: $bgColor
            text-align: center  
            .back
                position: absolute
                left:0
                padding-left:.2rem
                font-size:.4rem
                color:#fff
           
</style>